<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/layui.js"></script>
    <script src="/html/js/util.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <link rel="stylesheet" href="/html/js/css/layui.css" media="all">
    <title>经理商品管理界面</title>
</head>
<script>
    window.onload = async function () {
        let result = await ajaxPost("/user/getUserSession");
        if (result != "no") {
            $("tips").innerHTML = "你好," + result.username;
        } else {
            $("tips").innerHTML = "请先进行" + `<a href='/html/login.html'>登录</a>`;
        }

        await findProductByPage(1);
    }

    async function addToShopCar(productId) {
        let param = {
            productId: productId
        }
        let info = await ajaxGet("/shopCar/buy", param);
        if (info == "ok") {
            location.href = "/html/custom/shop.html";
        }
    }

    //分页查询商品信息
    async function findProductByPage(pageNo) {
        let startDate = $("startDate").value;
        let endDate = $("endDate").value;
        let productName = $("productName").value;
        let productStatue = $("productStatue").value
        let params = {
            startDate: startDate,
            endDate: endDate,
            pageNo: pageNo,
            productName: productName,
            productStatue: productStatue
        }
        let result = await ajaxGet("/product/findByPage", params)
        let list = result.list;
        let str = "<div style='display: flex;justify-content: space-around'>";
        for (let i = 0; i < list.length; i++) {
            let p = list[i];
            str += "<div>";
            str += `<div style="margin: 20px">产品名：${p.productName}</div>`;
            str += `<img style="height: 100px" src='/html/imgs/${p.productImg}'>`;
            str += `<div style="margin: 20px">产品价格：${p.productPrice}</div>`;
            str += `<div style="margin: 20px">已售出：${p.soldNum} 件</div>`;
            // str += `<div style="margin: 20px">产地：${p.productLocation}</div>`;
            // str += `<div style="margin: 20px">生产日期：${p.productDate}</div>`;
            str += `<button type="button" class="layui-btn"><a href="/html/owner/manageProduct.html?productId=${p.productId}">查看详情</a></button>`;
            str += "</div>";
        }
        str += "</div>";

        $("productContent").innerHTML = str;

        let cutStr = "<div style='display: flex;justify-content: center'>";

        for (let i = 1; i <= result.pages; i++) {
            cutStr += `<a style="margin: 10px" href="javascript:findProductByPage(${i})">${i}</a>`
        }
        cutStr += "</div>";
        $("cutPageDiv").innerHTML = cutStr;
    }

    //展示销售额信息
    async function showInfo() {
        let year = $("year").value;

        let params = {
            year: year,
        }
        let result = await ajaxGet("/count/countByMonth", params);
        let str = "";
        let box = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        for (let i = 0; i < result.length; i++) {
            str += "<div>"
            str += result[i].month + "月";
            str += "<br>"
            str += result[i].allPriceByMonth + "元"
            str += "</div>"
            box[result[i].month - 1] = result[i].allPriceByMonth;
        }
        $("countInfo").innerHTML = str;

        let ctx = document.getElementById('myChart').getContext('2d');
        let chart = new Chart(ctx, {
            // 要创建的图表类型
            type: 'line',
            // 数据集
            data: {
                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
                datasets: [{
                    label: "月销售金额统计",
                    backgroundColor: 'rgb(99,193,255)',
                    borderColor: 'rgb(20,74,84)',
                    data: box,
                }]
            },

            // 配置选项
            options: {}
        });
    }


</script>


<body style="padding-top: 50px;text-align: center">
<div style="padding:0 30px;display: flex;justify-content: center;margin-bottom: 50px">
    <div class="layui-form-mid layui-word-aux" id="tips"></div>

    <label class="layui-form-label">商品名</label>
    <input type="text" id="productName" required lay-verify="required"
           autocomplete="off"
           class="layui-input" style="width: 200px">
    <br>
    <label class="layui-form-label">起始日期</label>
    <input type="date" id="startDate" required lay-verify="required"
           autocomplete="off"
           class="layui-input" style="width: 200px">
    <br>
    <label class="layui-form-label">结束日期</label>
    <input type="date" id="endDate" required lay-verify="required"
           autocomplete="off"
           class="layui-input" style="width: 200px">
    <br>
    <label class="layui-form-label">商品状态</label>
    <input type="text" id="productStatue" required lay-verify="required" placeholder="上架/下架"
           autocomplete="off"
           class="layui-input" style="width: 200px">
    <br>
    <button type="button" class="layui-btn" onclick="findProductByPage(1)">查询</button>
    <button type="button" class="layui-btn"><a href="/html/owner/addNewProduct.html">添加新商品</a></button>
</div>

<div id="productContent">

</div>

<!--页码显示-->
<div id="cutPageDiv">

</div>
<label class="layui-form-label">年</label>
<input type="number" id="year" required lay-verify="required"
       autocomplete="off"
       class="layui-input" style="width: 100px">
<br>

<button type="button" class="layui-btn" onclick="showInfo()">查看销售情况</button>
<div id="countInfo" style="display: flex;justify-content: space-around">
</div>
<div style="display: flex;justify-content: center;width:50%; height:50%">
    <div>
        <canvas id="myChart">
        </canvas>
    </div>
</div>

</body>
</html>